<?php
// 【最终版 - 纯前端验证】rename.php
require_once('common/header.php'); 
?>
<style>
    .page-title-bar { padding: 1rem; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; background-color: #fff;}
    .page-title-bar .back-btn { font-size: 1.5rem; color: #333; text-decoration: none; margin-right: 1rem;}
    .page-title-bar h4 { margin: 0; font-weight: 600; }
</style>

<!-- 这个页面现在由Vue驱动，以处理动态显示 -->
<div id="rename-app" v-cloak>
    <div class="page-title-bar">
        <a href="profile.php" class="back-btn"><i class="bi bi-arrow-left"></i></a>
        <h4>实名认证</h4>
    </div>

    <div class="main-content">
        <div class="card">
            <div class="card-body">
                <!-- v-if: 如果已实名，显示提示信息 -->
                <div v-if="isRenamed" class="alert alert-success text-center p-4">
                    <i class="bi bi-check-circle-fill fs-1 text-success"></i>
                    <h4 class="alert-heading mt-3">您已完成实名认证！</h4>
                    <p class="mb-0">无需重复操作。如需修改信息，请联系客服。</p>
                </div>
                <!-- v-else: 如果未实名，显示表单 -->
                <form v-else id="rename-form" @submit.prevent="submitRename">
                    <p class="text-muted small">为保障您的账户安全与合规运营，请填写真实有效的身份信息。</p>
                    <div id="alert-container-rename" class="my-3"></div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">真实姓名</label>
                        <input type="text" class="form-control" v-model="form.name" placeholder="请输入您的真实姓名" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">身份证号</label>
                        <input type="text" class="form-control" v-model="form.uid" placeholder="请输入18位身份证号" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">手机号码</label>
                        <input type="text" class="form-control" v-model="form.phone" placeholder="请输入您的手机号" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">验证码</label>
                        <div class="input-group">
                            <input type="text" class="form-control" v-model="form.code" placeholder="请输入短信验证码" required>
                            <button class="btn btn-outline-primary" type="button" id="get_verification_code" @click="getSmsCode" :disabled="countdown > 0">
                                {{ countdown > 0 ? countdown + 's' : '获取验证码' }}
                            </button>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-success w-100 btn-lg mt-3" :disabled="isSubmitting">
                        {{ isSubmitting ? '提交中...' : '提交认证' }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<?php require_once('common/footer.php'); ?>